<template>
  <div id="collapsed" @click="handleCollapsed">
    <i v-if="collapsed" class="el-icon-s-unfold" />
    <i v-else class="el-icon-s-fold" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState('app', {
      collapsed: state => state.collapsed
    })
  },

  methods: {
    ...mapMutations('app', ['SET_COLLAPSED']),

    handleCollapsed() {
      this['SET_COLLAPSED'](!this.collapsed)
    }
  }
}
</script>

<style lang="scss" scoped>
#collapsed {
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  i {
    font-size: 20px;
    margin-right: 10px;
  }
}
</style>
